import React from 'react';
import ReactDOM from 'react-dom';
import { Spin } from 'antd';
import style from './BaseLoading.less';

interface BaseLoadingType {
  spinning: boolean;
  size?: 'small' | 'default' | 'large';
  show?: boolean;
  wrapperClassName?: string;
}

export function BaseLoading({
  spinning,
  size = 'large',
  wrapperClassName = '.basicLayout',
}: BaseLoadingType) {
  const container = document.querySelector(wrapperClassName);
  if (!container) return;
  if (spinning) {
    const span = document.createElement('span');
    span.setAttribute('id', 'requestLoadingWrap');
    span.setAttribute('class', style.requestLoadingWrap);
    container.appendChild(span);
    ReactDOM.render(
      <Spin
        spinning={spinning}
        size={size}
        wrapperClassName={wrapperClassName}
        className={style.requestLoading}
        tip="Loading..."
      />,
      span,
    );
  } else {
    const loading = document.getElementById('requestLoadingWrap');
    if (loading) {
      ReactDOM.unmountComponentAtNode(loading);
      if (loading.parentElement) {
        loading.parentElement.removeChild(loading);
      }
    }
  }
}
